const code =
`<style lang="scss" scoped>
.xxx{
    background:rgba(#000,.1) !important;
}
</style>
<template>
    <table class="ui celled striped table xxx">
            <thead>
            <tr>
                <th>名称</th>
                <th>组件</th>
                <th>输出值</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td class="collapsing">
                    单选下拉树
                </td>
                <td width="40%">
                    <ui-dropdown-tree size="mini"
                        :model-id.sync="modelId"
                        :model-label.sync="modelLabel"
                        :model-custom.sync="modelCustom"
                        :treeData="treeData"
                        placeholder="单选下拉树"
                        custom="name"
                        @change="callback"
                        style="width:150px;"
                    >
                    </ui-dropdown-tree>
                </td>
                <td>
                    ID:{{ modelId }} <br> LABEL:{{ modelLabel }} <br> CUSTOM:{{ modelCustom }}
                </td>
            </tr>
            <tr>
                <td>
                    多选下拉树
                </td>
                <td>
                    <ui-dropdown-tree multiple
                        :model-id.sync="val2.id"
                        :model-label.sync="val2.label"
                        :model-custom.sync="val2.custom"
                        :treeData="treeData" custom="label"
                        check-strictly
                        @change="callback" tag-equal
                        placeholder="多选下拉树">
                    </ui-dropdown-tree>
                </td>
                <td>
                    <div>ID:{{ val2.id }} <br> LABEL:{{ val2.label }} <br> CUSTOM:{{ val2.custom }}</div>
                </td>
            </tr>
            </tbody>
        </table>
</template>
<script>
    export default {
        data() {
            return {
                val:{},
                val2:{
                    id:'6,8',
                    label:'',
                    custom:'',
                },
                modelId:'3-3-1',
                modelLabel:'',
                modelCustom:'',
                treeData:[]
            }
        },
        mounted() {
            setTimeout(() => {
                this.treeData = [
                    {
                        'id':1,
                        'label':'一级 1',
                        'can_select':0,
                        'children':[
                            {
                                'id':4,
                                'label':'二级 1-1',
                                'can_select':0,
                                'children':[
                                    {
                                        'id':9,
                                        'can_select':1,
                                        'label':'驴子 1-1-1',
                                        'pinyin_code':'lv',
                                        name: {
                                            xxx:12312312
                                        },
                                    },
                                    {
                                        'id':10,
                                        'can_select':1,
                                        'label':'三级 1-1-2',
                                        'pinyin_code':'0'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        'id':2,
                        'label':'一级 2',
                        'children':[
                            {
                                'id':5,
                                'label':'二级 2-1'
                            },
                            {
                                'id':6,
                                'label':'二级 2-2',
                                disabled: true,
                            }
                        ]
                    },
                    {
                        'id':'3-3',
                        'label':'一级 3',
                        'children':[
                            {
                                'id':'3-3-1',
                                'label':'二级 3-1'
                            },
                            {
                                'id':8,
                                'label':'二级 3-2'
                            }
                        ]
                    }
                ]
            }, 1000)
            setTimeout(() => {
                this.modelId = '9'
                this.val2.id = '9,5'
            }, 2000)
            setTimeout(() => {
                this.modelId = ''
                this.val2.id = ''
            }, 3000)
        },
        watch:{},
        methods:{
            callback(v){
                this.log('cb:',v)
            }
        }
    }
</script>`;

export default code;
